<div class="row m-2">
  <div class="col-4">
      <form class="m-2" novalidate (ngSubmit)="submitForm()">
          <div class="form-group">
              <label>Name</label>
              <input class="form-control" name="name"
                  [(ngModel)]="newProduct.name" />
          </div>
          <div class="form-group">
              <label>Category</label>
              <input class="form-control" name="category"
                  [(ngModel)]="newProduct.category" />
          </div>
          <div class="form-group">
              <label>Price</label>
              <input class="form-control" name="price"
                  [(ngModel)]="newProduct.price" />
          </div>
          <button class="btn btn-primary" type="submit">Create</button>
      </form>
  </div>
  <div class="col-8">
    <div class="checkbox">
        <label>
            <input type="checkbox" [(ngModel)]="darkColor" />
            Dark Cell Color
        </label>
    </div>

    <table class="table table-sm table-bordered table-striped"
            [paCellDarkColor]="darkColor">
        <thead>
            <tr><th></th><th>Name</th><th>Category</th><th>Price</th><th></th></tr>
        </thead>
        <tbody>
            <tr *paFor="let item of getProducts(); let i = index; let odd = odd;
                    let even = even" [class.bg-info]="odd"
                    [class.bg-warning]="even">
                    <td style="vertical-align:middle">{{i + 1}}</td>
                    <td style="vertical-align:middle">{{item.name}}</td>
                    <td style="vertical-align:middle">{{item.category}}</td>
                    <td style="vertical-align:middle">{{item.price}}</td>
                    <td class="text-center">
                        <button class="btn btn-danger btn-sm"
                                (click)="deleteProduct(item.id)">
                            Delete
                        </button>
                    </td>
            </tr>
        </tbody>
    </table>


  </div>
</div>
